<template>
  <div class="profile-container">
    <div class="profile-header">
      <h2>个人信息</h2>
    </div>
    
    <div class="profile-form">
      <div class="form-item">
        <label class="form-label">邮箱</label>
        <div class="form-value">123456@qq.com</div>
      </div>
      
      <div class="form-item">
        <label class="form-label">昵称</label>
        <div class="form-value">admin</div>
      </div>
      
      <div class="form-item">
        <label class="form-label">昵称</label>
        <div class="form-value">超级管理员</div>
      </div>
      
      <div class="form-item">
        <label class="form-label">国家地区</label>
        <select class="form-select">
          <option value="">选择</option>
          <option value="china">中国</option>
          <option value="usa">美国</option>
          <option value="uk">英国</option>
        </select>
      </div>
      
      <div class="form-item">
        <label class="form-label">所在省市</label>
        <select class="form-select">
          <option value="">选择</option>
          <option value="gd">广东省</option>
          <option value="zj">浙江省</option>
          <option value="js">江苏省</option>
        </select>
      </div>
      
      <div class="form-item">
        <label class="form-label">街道地址</label>
        <input type="text" class="form-input" value="人 民 路 11号">
      </div>
      
      <div class="form-item">
        <label class="form-label">联系电话</label>
        <input type="text" class="form-input" value="0752">
      </div>
      
      <div class="form-actions">
        <button class="update-btn">更改信息</button>
      </div>
  
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style scoped>
.profile-container {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.profile-header {
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.profile-header h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.form-label {
  width: 80px;
  font-size: 14px;
  color: #666;
  text-align: right;
  margin-right: 16px;
}

.form-value {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  color: #333;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.form-select {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 36px;
  color: #606266;
  outline: none;
}

.form-select:focus {
  border-color: #409eff;
}

.form-input {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 36px;
  color: #606266;
  outline: none;
}

.form-input:focus {
  border-color: #409eff;
}

.form-actions {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}

.update-btn {
  padding: 10px 24px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.update-btn:hover {
  background-color: #66b1ff;
}

</style>